<template>
  <div>
    <div style="display: flex; justify-content: space-between; margin: 0 0 8px">
      <div>
        <span>{{ data.dwmc }}</span>
        <span v-if="qianShouRenInfo.rymc">（{{ qianShouRenInfo.rymc }}）</span>
        <span>：</span>
        <span :style="{ color: data.sfqshf == '1' ? '#17d417' : '#ff1f1f' }">
          {{ data.qshfzt }}
        </span>
      </div>
      <div>
        <span>{{ qianShouRenInfo.qshfsj }}</span>
        <span
          v-if="dataList && dataList.length"
          style="margin: 0 0 0 16px; color: #1890ff; cursor: pointer"
          @click="expand = !expand"
        >
          {{ expand ? '收起' : '展开' }}
          <UpOutlined v-show="expand === true" />
          <DownOutlined v-show="expand !== true" />
        </span>
      </div>
    </div>
    <time-line v-if="dataList && dataList.length && expand === true" :data-list="dataList">
      <template #default="{ data }">
        <div style="padding: 10px; border-radius: 4px; background: rgba(135, 135, 135, 0.1)">
          <div style="display: flex; align-items: center">
            <div>{{ data.fkrmc }}</div>
            <div style="margin-left: 32px">{{ data.fksj }}</div>
          </div>
          <div style="display: flex">
            <div style="flex: none">反馈内容：</div>
            <div>{{ data.fknr }}</div>
          </div>
          <div style="display: flex">
            <div style="flex: none">附件：</div>
            <attachment-list :data="data.fjdz" :name-list="data.fjmc" :col-span="3" />
          </div>
        </div>
      </template>
    </time-line>
  </div>
</template>

<script>
import AttachmentList from '@gis/lib/components/attachment-list.vue';
import TimeLine from '@gis/lib/components/antd-time-line/index.vue';
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
import find from 'lodash-es/find.js';
import get from 'lodash-es/get.js';

export default {
  name: 'instruction-details-item',
  components: {
    AttachmentList,
    DownOutlined,
    UpOutlined,
    TimeLine,
  },
  props: {
    data: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      expand: false,
    };
  },
  computed: {
    dataList() {
      return get(this.data, 'fkxx') || [];
    },
    qianShouRenInfo() {
      const list = get(this.data, 'qshfryxx') || [];
      const data = find(list, (item) => get(item, 'sfqshf') === '1');
      return data || {};
    },
  },
  methods: {},
};
</script>

<style scoped></style>
